<template>
  <div class="setting-menu" :class="{ transparent: systemDetailSettingVisible }">
    <div class="header pl15">
      <span>{{ $t('default.setting') }}</span>
      <system-child-btn />
    </div>
    <template v-if="!systemDetailSettingVisible">
      <div class="title tac fs20 fw100 pb34 pt30" @mousedown.stop @dblclick.stop>
        Windows {{ $t('default.setting') }}
      </div>
      <div class="search" @mousedown.stop @dblclick.stop>
        <input v-model="search" type="text" :placeholder="`${$t('default.search')}${$t('default.setting')}`" />
        <span @click.stop="search = ''">
          <i class="iconfont" :class="[!search ? 'wos-search-left fs12' : 'wos-close-wechat fs18']" />
        </span>
      </div>
      <div class="menu" @mousedown.stop @dblclick.stop>
        <ul class="menu-list">
          <li v-for="item in systemList" :key="item.icon" @click.stop="handleDetailSetting(item)">
            <span class="icon mr20">
              <i class="iconfont fs30" :class="item.icon" />
            </span>
            <div class="info">
              <div class="name fs14">{{ item.name }}</div>
              <div class="sub">{{ item.sub }}</div>
            </div>
          </li>
        </ul>
      </div>
    </template>
    <system-setting v-else :menu="settingLeftMenu" @back="handleBack" />
  </div>
</template>

<script setup lang="ts">
import SettingColor from '@/components/systemWindow/systemSetting/settingColor.vue'
import SystemSetting from '@/components/systemWindow/systemSetting/systemSetting.vue'
import SystemChildBtn from '@/base/systemWindow/systemChildBtn.vue'
import SettingBackground from '@/components/systemWindow/systemSetting/settingBackground.vue'
import { computed, markRaw, ref, inject, onBeforeMount } from 'vue'
import { useRunningTasksStore } from '@/stores/taskBar/runningTasks'
import { useI18n } from 'vue-i18n'
import type { Component, Raw } from 'vue'

export interface ISystemLeftMenu {
  name: string
  icon: string
  component: Raw<Component>
}

export interface ISystemList {
  name: string
  sub: string
  icon: string
  children?: ISystemLeftMenu[]
}

const runningTasksStore = useRunningTasksStore()

const appId = inject<string>('appId') || ''
const taskId = inject<string>('taskId') || ''
const componentData = inject<{ [key: string]: unknown }>('componentData')

const i18n = useI18n()
const search = ref<string>('')
const systemDetailIcon = ref<string>('')
const systemDetailSettingVisible = ref<boolean>(false)
const systemList = computed<ISystemList[]>(() => [
  {
    name: i18n.t('setting.system'),
    sub: `${i18n.t('setting.show')}、${i18n.t('setting.audio')}、
    ${i18n.t('setting.notify')}、${i18n.t('setting.power')}`,
    icon: 'wos-system'
  },
  {
    name: i18n.t('setting.equipment'),
    sub: `${i18n.t('setting.bluetooth')}、${i18n.t('setting.printer')}、${i18n.t('setting.mouse')}`,
    icon: 'wos-equipment'
  },
  {
    name: i18n.t('setting.phone'),
    sub: `${i18n.t('setting.connect')}`,
    icon: 'wos-phone'
  },
  {
    name: i18n.t('setting.network'),
    sub: `${i18n.t('setting.wlan')}、${i18n.t('setting.flight')}、${i18n.t('setting.vpn')}`,
    icon: 'wos-network'
  },
  {
    name: i18n.t('setting.personality'),
    sub: `${i18n.t('setting.background')}、${i18n.t('setting.lock')}、${i18n.t('setting.color')}`,
    icon: 'wos-personality',
    children: [
      { name: i18n.t('setting.background'), icon: 'wos-picture', component: markRaw(SettingBackground) },
      { name: i18n.t('setting.color'), icon: 'wos-color', component: markRaw(SettingColor) },
      { name: i18n.t('setting.lockWin'), icon: 'wos-lock-win', component: markRaw(SettingBackground) },
      { name: i18n.t('setting.theme'), icon: 'wos-theme', component: markRaw(SettingBackground) },
      { name: i18n.t('setting.font'), icon: 'wos-font-line', component: markRaw(SettingBackground) },
      { name: i18n.t('setting.start'), icon: 'wos-start', component: markRaw(SettingBackground) },
      { name: i18n.t('setting.task'), icon: 'wos-task', component: markRaw(SettingBackground) }
    ]
  },
  {
    name: i18n.t('setting.application'),
    sub: `${i18n.t('setting.uninstall')}、${i18n.t('setting.normal')}、${i18n.t('setting.function')}`,
    icon: 'wos-app-list'
  },
  {
    name: i18n.t('setting.account'),
    sub: `${i18n.t('setting.your')}、${i18n.t('setting.email')}、${i18n.t('setting.sync')}、
    ${i18n.t('setting.work')}、${i18n.t('setting.family')}`,
    icon: 'wos-user'
  },
  {
    name: i18n.t('setting.time'),
    sub: `${i18n.t('setting.language')}、${i18n.t('setting.area')}、${i18n.t('setting.date')}`,
    icon: 'wos-language'
  },
  {
    name: i18n.t('setting.game'),
    sub: `${i18n.t('setting.xbox')}、${i18n.t('setting.capture')}、${i18n.t('setting.model')}`,
    icon: 'wos-xbox'
  },
  {
    name: i18n.t('setting.use'),
    sub: `${i18n.t('setting.lecturer')}、${i18n.t('setting.magnifier')}、${i18n.t('setting.contrast')}`,
    icon: 'wos-date'
  },
  {
    name: i18n.t('setting.search'),
    sub: `${i18n.t('setting.file')}、${i18n.t('setting.authority')}`,
    icon: 'wos-search-left'
  },
  {
    name: i18n.t('setting.privacy'),
    sub: `${i18n.t('setting.address')}、${i18n.t('setting.camera')}、${i18n.t('setting.microphone')}`,
    icon: 'wos-lock-line'
  },
  {
    name: i18n.t('setting.update'),
    sub: `${i18n.t('setting.window')}、${i18n.t('setting.recover')}、${i18n.t('setting.backup')}`,
    icon: 'wos-update'
  }
])
const settingLeftMenu = computed<ISystemList>(() => {
  return systemList.value.find((item) => item.icon === systemDetailIcon.value) || { name: '', sub: '', icon: '' }
})

const init = () => {
  if (!!componentData?.detailVisible && componentData?.systemDetailIcon) {
    const find = systemList.value.find((item) => item.icon === componentData.systemDetailIcon)
    if (find) handleDetailSetting(find)
  }
}

const handleDetailSetting = (data: ISystemList) => {
  if (data.children?.length) {
    runningTasksStore.setTaskPatch(appId, taskId, {
      componentData: {
        detailVisible: true,
        menuIcon: 'wos-picture',
        systemDetailIcon: data.icon
      }
    })
    systemDetailIcon.value = data.icon
    systemDetailSettingVisible.value = true
  }
}

const handleBack = () => {
  systemDetailSettingVisible.value = false
  runningTasksStore.setTaskPatch(appId, taskId, {
    componentData: {
      detailVisible: false,
      systemDetailIcon: ''
    }
  })
}

onBeforeMount(() => {
  init()
})
</script>

<style scoped lang="scss">
@import '@/assets/scss/common';
@import '@/assets/scss/mixin';

.setting-menu {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
  position: relative;
  color: var(--system-modal-drag-color);
  background-color: var(--system-modal-drag-bg-color);

  &.transparent {
    background-color: transparent;
  }

  .header {
    display: flex;
    align-items: center;
    height: $system-drag-bar-height;
    position: relative;
  }

  .search {
    margin: 0 auto;
    width: 336px;
    height: 34px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 2px solid var(--theme-color);

    > input {
      color: var(--system-modal-drag-color);
      box-sizing: border-box;
      padding-left: 12px;
      width: calc(100% - 38px);
      height: 100%;
    }

    > span {
      cursor: pointer;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      width: 28px;
      height: 100%;
    }
  }

  .menu {
    padding: 0 48px;
    display: flex;
    justify-content: center;

    .menu-list {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      max-width: 1330px;
      padding-top: 50px;
      flex-wrap: wrap;
      gap: 20px;

      > li {
        display: flex;
        box-sizing: border-box;
        padding-top: 18px;
        padding-left: 26px;
        width: 250px;
        min-width: 250px;
        height: 86px;
        border: 1px solid transparent;

        &:hover {
          @include hover-model;
          border-color: var(--system-context-menu-border-color);
        }

        span {
          color: var(--theme-color);
        }

        .name {
          color: var(--base-font);
        }

        .sub {
          color: var(--sub-font);
        }
      }
    }
  }
}
</style>
